{% extends 'base.html' %}
{% block content %}
<h2>订单列表</h2>
<button class="btn btn-primary" onclick="showOrderTypeModal()">新建订单</button>
<!-- 订单类型弹窗 -->
<div id="orderTypeModal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);z-index:9999;">
  <div style="background:#fff;padding:30px 40px;border-radius:8px;box-shadow:0 2px 8px #888;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:260px;text-align:center;">
    <h4>请选择订单类型</h4>
    <div style="margin:30px 0;">
      <a href="/orders/create/" class="btn btn-primary" style="margin-right:20px;">购卡</a>
      <a href="/orders/renew/select/" class="btn btn-success">续费</a>
    </div>
    <button class="btn btn-secondary" onclick="hideOrderTypeModal()">关闭</button>
  </div>
</div>
<script>
function showOrderTypeModal() {
  document.getElementById('orderTypeModal').style.display = 'block';
}
function hideOrderTypeModal() {
  document.getElementById('orderTypeModal').style.display = 'none';
}
</script>
<table class="table">
    <thead>
        <tr>
            <th>订单号</th>
            <th>订单类型</th>
            {% if user.is_superuser or user.profile and user.profile.type == 'admin' %}
                <th>客户</th>
            {% endif %}
            <th>卡数量</th>
            <th>金额</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>支付时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for order in page_obj %}
        <tr>
            <td>{{ order.order_no }}</td>
            <td>{{ order.get_order_type_display }}</td>
            {% if user.is_superuser or user.profile and user.profile.type == 'admin' %}
                <td>{% if order.customer %}{{ order.customer.username }}{% else %}{% endif %}</td>
            {% endif %}
            <td>{{ order.card_count }}</td>
            <td>{{ order.amount }}</td>
            <td>{{ order.get_status_display }}</td>
            <td>{{ order.created_at }}</td>
            <td>{{ order.paid_at|default_if_none:'' }}</td>
            <td>
                <a href="/orders/{{ order.id }}/" class="btn btn-sm btn-secondary">详情</a>
                {% if order.status == 'pending' %}
                    <a href="/orders/edit/{{ order.id }}/" class="btn btn-sm btn-info">修改</a>
                {% elif order.status == 'paid' %}
                    {% if user.is_superuser or user.profile and user.profile.type == 'admin' %}
                        <a href="/orders/edit/{{ order.id }}/" class="btn btn-sm btn-info">修改</a>
                        <a href="/orders/deliver/{{ order.id }}/" class="btn btn-sm btn-primary">发货</a>
                    {% endif %}
                {% endif %}
                {% if order.status == 'pending' and not order.delete_at %}
                    <a href="/order/pay/{{ order.id }}/" class="btn btn-sm btn-success">支付</a>
                    {% if user.is_superuser or user.profile and user.profile.type == 'admin' %}
                        <a href="/orders/paid/{{ order.id }}/" class="btn btn-sm btn-warning">已支付</a>
                    {% endif %}
                    <a href="/order/cancel/{{ order.id }}/" class="btn btn-sm btn-danger" onclick="return confirm('确定要取消该订单吗？')">取消</a>
                {% endif %}
                {% if order.order_type == 'renew' %}
                    <a href="/orders/cards/{{ order.id }}/" class="btn btn-sm btn-success">卡列表</a>
                {% elif order.status == 'completed' and order.order_type == 'buy' %}
                    <a href="/orders/cards/{{ order.id }}/" class="btn btn-sm btn-success">卡列表</a>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<!-- 分页控件 -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    {% if page_obj.number > 1 %}
      <li class="page-item"><a class="page-link" href="?page=1">首页</a></li>
    {% endif %}
    {% if page_obj.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a></li>
    {% endif %}
    {% for num in page_obj.paginator.page_range %}
      {% if page_obj.number == num %}
        <li class="page-item active"><span class="page-link">{{ num }}</span></li>
      {% else %}
        <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
      {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a></li>
    {% endif %}
    {% if page_obj.number < page_obj.paginator.num_pages %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">尾页</a></li>
    {% endif %}
  </ul>
</nav>
{% endblock %}
